import React, { useEffect, useState } from 'react'
import socketIO from 'socket.io-client'
import Head from './Head'
import { MyIcon } from '../MyIcon/MyIcon'
import styles from '../css/Chat.module.scss'
import { Sticky } from 'react-vant';
import {useLocation} from 'react-router-dom'
const socket = socketIO.connect('http://localhost:5000',{query:{

}})
export default function Chat() {
    const [messages, setmessages] = useState([])
    let {item}=useLocation().state
    // console.log(JSON.parse(sessionStorage.user)._id);
      // 向服务端发送信息
      const send = (e) => {
        let id1=JSON.parse(sessionStorage.user)._id
        let id2=item._id
        if (e.keyCode === 13) {
            socket.emit('message', {
                text: e.target.value,
                username: obj.username,
                id: obj._id,
                userimg:obj.avatar,
                // socketID: socket.id,
                chatId:[id1,id2]
            })
            e.target.value = ''
        }
    }

    useEffect(() => {
        socket.connect()
        // let id1=JSON.parse(sessionStorage.user)._id
        // let id2=item._id

        // socket.emit('canshu',[id1,id2])

        socket.on('lianjie',(data)=>{
            // console.log(data);
            setmessages(data)
        })
        socket.on('messageResponse', data=>{
            setmessages(data)
        })
    }, [ messages])

    const obj=JSON.parse(sessionStorage.getItem('user'))

    let id1=JSON.parse(sessionStorage.user)._id
    let id2=item._id
    let idList=[id1,id2]
    // console.log(idList);
    return (
        <div className={styles.chat}>
            <Head socket={socket} titleName={item.username}></Head>
            <div className={styles.message_container}>
                {
                    messages.filter(item=>{
                        return (item.chatId[0]===id1 && item.chatId[1]===id2) || (item.chatId[0]===id2 && item.chatId[1]===id1) 
                    }).map((message,index) => message.id === JSON.parse(sessionStorage.user)._id
                        ?
                        (
                            <div key={index} className={styles.my_message_ele}>
                                {/* <div style={{ textAlign: 'center', margin: '20px', fontSize: '14px' }}>昨天 12 ： 29</div> */}
                                <div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
                                    <img className={styles.my_message_img} src={message.userimg} alt='' />
                                    <div className={styles.my_message_text}>
                                        {/* 你写的真不错，很受启发呀...... */}
                                        {message.text}
                                    </div>
                                </div>
                            </div>
                        )
                        :
                        (
                            <div key={index} className={styles.message_ele}>
                                {/* <div style={{ textAlign: 'center', margin: '20px', fontSize: '14px' }}>昨天 12 ： 29</div> */}
                                <div style={{ display: 'flex' }}>
                                    <img className={styles.message_img} src={message.userimg} alt='' />
                                    <div className={styles.message_text}>
                                        {/* 你写的真不错，很受启发呀...... */}
                                        {message.text}
                                    </div>
                                </div>
                            </div>
                        )
                    )
                }
            </div>
            <Sticky position="bottom">
                <div className={styles.message_keyboard}>
                    <input onKeyUp={(e) => { send(e) }} placeholder='请输入' className={styles.keyboard} type='text' />
                    {/* <MyIcon type></MyIcon> */}
                    <div style={{ width: '30px', height: '30px', borderRadius: '50%', backgroundColor: "#3E7CFC", textAlign: 'center', lineHeight: '30px', fontWeight: 'bold' }}>
                        <MyIcon type='icon-_tianjiajiahao'></MyIcon>
                    </div>
                </div>
            </Sticky>
            <div style={{height:'50px'}}></div>
        </div>
    )
}
